<template>
  <div>
    <div class="by">
      <!-- 消息框 -->
      <div class="msg-container" v-loading="isLoading">
        <div class="top-tag">
          <ul>
            <li :class="{ 'ClickColor': checktag==0 }" @click="pathTo(0)">审核通知
              <el-badge v-if="$store.state.msgCountobj.toExamineMsgCount!=0" class="mark"
                :value="$store.state.msgCountobj.toExamineMsgCount" />
            </li>
            <li :class="{ 'ClickColor': checktag==1 }" @click="pathTo(1)">系统通知
              <el-badge v-if="$store.state.msgCountobj.sysMsgCount!=0" class="mark"
                :value="$store.state.msgCountobj.sysMsgCount" />
            </li>
            <li :class="{ 'ClickColor': checktag==2 }" @click="pathTo(2)">我的反馈
            </li>
          </ul>
        </div>
        <div class="msg-content">
          <!--使用审核消息 -->
          <examineMsg :msgList="msgList" @clearMsg="clearExamineMsg" @readMsg="readMsg" @delMsg="delMsg"
            v-if="checktag==0"></examineMsg>
          <!-- 使用系统消息 -->
          <sysMsg v-if="checktag==1" :msgList="msgList" @clearMsg="clearExamineMsg"></sysMsg>
          <!-- 反馈消息 -->
          <feedbackMsg v-if=" checktag==2" :msgList="msgList" @reloadReq="getFeedbackMsgList"></feedbackMsg>
        </div>
      </div>

      <!--下波浪 -->
      <div>
        <div class="wave1"></div>
        <div class="wave2"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import examineMsg from '@/components/examineMsg/index.vue'
  import sysMsg from '@/components/sysMsg/sysMsg.vue'
  import feedbackMsg from '@/components/feedbackMsg/feedbackMsg.vue'
  import {
    marked
  } from 'marked'
  import prism from "prismjs";
  export default {
    name: 'msg',
    components: {
      examineMsg,
      sysMsg,
      feedbackMsg
    },
    data() {
      return {
        checktag: this.$route.params.id,
        msgList: [],
        isLoading: false
      };
    },
    mounted() {
      this.tabRequst(this.$route.params.id)
    },
    methods: {
      pathTo(item) {
        this.isLoading = true
        this.tabRequst(item)
        this.checktag = item
      },
      // 请求审核消息列表
      getExamineMsgList() {
        this.$api.msg.getExamineMsg().then(res => {
          if (res.code == 200) {
            let datas = res.data
            this.msgList = []
            datas.forEach(item => {
              let obj = JSON.parse(item.msg)
              obj.msgId = item.id
              obj.isRead = item.isRead
              this.msgList.push(obj)
            });
            this.isLoading = false
          }
        })
      },
      //获取系统消息
      getSysMsgList() {
        this.$api.msg.sysMsgList().then(res => {
          if (res.code == 200) {
            this.msgList = []
            this.msgList = res.data
            this.isLoading = false
            // 修改阅读状态
            for (const item in this.msgList) {
              if (this.msgList[item].isRead == 0) {
                //  修改阅读状态
                this.$api.msg.updateSysRead()
                this.$store.dispatch("getMsgCount")
                break;
              }
            }
          }
        })
      },
      // 获取反馈消息
      getFeedbackMsgList() {
        this.$api.msg.feedMsgList().then(res => {
          if (res.code == 200) {
            this.msgList = []
            let content = res.data
            content.forEach(item => {
              item.msg = this.content(item.msg)
            })
            this.msgList = content
            this.isLoading = false
          }
        })
      },
      // 转义
      content(msg) {
        var reg = new RegExp("<pre", "g")
        var content = marked(msg)
        var str = content.replace(reg, `<pre class='line-numbers'`)
        return str
      },
      tabRequst(item) {
        // 更新头部数据
        if (item == 0) {
          this.getExamineMsgList()
        } else if (item == 1) {
          this.getSysMsgList()
        } else if (item == 2) {
          this.getFeedbackMsgList()
        }
        this.$store.dispatch("getMsgCount")
      },
      // 删除所有已读消息
      clearExamineMsg(type) {
        console.log("删除类型" + type);
        this.$api.msg.delReadMsg(type).then(res => {
          if (res.code == 200) {
            this.$message.success("已清空")
            this.tabRequst(type)
          }
        })
      },
      // 修改已读消息
      readMsg(id) {
        console.log(id);
        if (id != undefined) {
          console.log("执行已读操作");
          // 执行已读操作
          this.$api.msg.updateRead(id)
          this.$store.dispatch("getMsgCount")
        }
      },
      delMsg(id, type) {
        this.$api.msg.delMsg(id).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功")
            this.tabRequst(type)
          }
        })
      }
    },
    watch: {
      $route(to, from) {
        this.checktag = to.fullPath.split("/")[2]
      }
    }
  };
</script>
<style scoped lang="less">
  .by {
    /* https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg/2024-10-12/0f589a128b0648399145d02b36c86672.jpg */
    background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg/2024-10-12/0f589a128b0648399145d02b36c86672.jpg") no-repeat;
    /* https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg/2024-10-12/46785555990c4b209fb8495463fa7f69.jpg */
    /* background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg/2024-10-12/46785555990c4b209fb8495463fa7f69.jpg") no-repeat; */
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    z-index: 10;
    position: relative;
  }



  .msg-container {
    min-width: 800px;
    min-height: 400px;
    max-height: 500px;
    /* border: 1px solid red; */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    overflow: auto;
  }

  /* 上选择框 */
  .top-tag {
    height: 30px;
    border-bottom: 1px solid gainsboro;
  }

  li {
    list-style: none;
    float: left;
    margin: 0 10px;
    line-height: 30px;
    cursor: pointer;
  }

  /* .msg-content {
    height: ;
  } */

  .ClickColor {
    color: rgb(73, 177, 245);
  }

  .wave1,
  .wave2 {
    position: absolute;
    bottom: 0;
    transition-duration: .4s, .4s;
    z-index: 80
  }

  .wave1 {
    background: url("https://blog.ezuxoay.top/img/wave1.png") repeat-x;
    height: 75px;
    width: 200%;
    z-index: 10
  }

  .wave1,
  .wave2 {
    bottom: 0;
    -webkit-animation: gradientBG-data-v-2b509f04 90s linear infinite;
    animation: gradientBG-data-v-2b509f04 90s linear infinite
  }

  .wave2 {
    background: url("https://blog.ezuxoay.top/img/wave2.png") repeat-x;
    height: 90px;
    width: 400%;
    left: -100px;
    z-index: 5
  }

  @-webkit-keyframes gradientBG-data-v-2b509f04 {
    0% {
      background-position: 0 50%
    }

    50% {
      background-position: 100% 50%
    }

    to {
      background-position: 0 50%
    }
  }

  @keyframes gradientBG-data-v-2b509f04 {
    0% {
      background-position: 0 50%
    }

    50% {
      background-position: 100% 50%
    }

    to {
      background-position: 0 50%
    }
  }
</style>


</style>